<template>
    <div>
        <!--pages/doctorDetail/doctorDetail.wxml-->
        <div class='doctor-info-wrap column'>
            <img class='info-bg' src='../assets/header-bg.png' ></img>
            <div class='doctor-info column wrap'>
                <div class='doctor flex'>
                    <img :src='doctorDetail.avatar'  class='imgActive'></img>
                    <div class='info column'>
                        <div class='name overhidden flex'>{{doctorDetail.doctorname}}
                            <span> {{doctorDetail.descr}}</span>
                        </div>
                        <p class='overhidden num flex'>{{doctorDetail.orgname}}</p>
                        <p class='overhidden num flex'>在线看诊数：{{doctorDetail.patientnumber}}人</p>
                    </div>
                </div>
                <div class='intro'>{{doctorDetail.myresume}}</div>
            </div>
        </div>
        <div class='content-wrap column'>
            <div class='doctor-time border top flex'>
                <div class='bold'>今日就诊时间：</div>
                <div class='online-time column'>
                    <p>{{doctorDetail.now_work_time }}</p>
                    <p class='tips' v-if="doctorDetail.online_status == 1">(当前挂号人数{{doctorDetail.now_visit_number}}人)</p>
                </div>
            </div>
            <div class='content column border'>
                <div class='title flex'>医生公告</div>
                <div class='main flex'>{{doctorDetail.mynotice || '暂无信息'}}</div>
            </div>
            <div class='content column border'>
                <div class='title'>门诊信息</div>
                <div class='main column'>
                    <div class='main-item flex' v-for="(item,index) in doctorDetail.doctor_workday" :key="index">
                        <p class='address flex'>{{item.orgname}}</p>
                        <p class='time flex'>{{item.nowtime}} {{item.amflag == 1?'上午':''}}{{item.pmflag == 1?'下午':''}}{{item.nightflag == 1?'晚上':''}}</p>
                    </div>
                </div>
            </div>
            <div class='content column border'>
                <div class='title flex'>擅长调理</div>
                <div class='label flex'>
                    <div class='label-item flex' v-for="(item,index) in doctorDetail.doctor_illness" :key="index">{{item}}</div>
                </div>
            </div>
            <div class='content column'>
                <div class='title nopadding flex'>
                    <p>评价</p>
                    <p class='look' @click='lookAllTap' v-if="commentList.length">查看全部</p>
                </div>
                <div class='evaluate column' v-if="commentList.length">
                    <div class='evaluate-item column border' v-for="(item,index) in commentList" :key="index" v-if="index<3">
                        <div class='evaluate-up flex'>
                            <div class='user flex'>
                                <div class='star'>
                                    <img :src="item.level1 < items.type?items.img:items.imgActive" v-for="(items,key) in gradeList"></img>
                                </div>
                                <p class='username'>{{item.phone}}</p>
                            </div>
                            <p class='time'>{{item.createtime}}</p>
                        </div>
                        <div class='evaluate-down column'>
                            <div class='comment flex'>评语：{{item.commenttext || '好评'}}</div>
                            <!-- <div class='ill-intro flex'>症状描述：{{item.disease}}</div> -->
                            <div class='label flex'>
                                <div class='label-item flex' v-if="item.lable1 == 1">响应速度很快</div>
                                <div class='label-item flex' v-if="item.lable2 == 1">回答很专业</div>
                                <div class='label-item flex' v-if="item.lable3 == 1">意见很有帮助</div>
                                <div class='label-item flex' v-if="item.lable4 == 1">讲解很细致 </div>
                                <div class='label-item flex' v-if="item.lable5 == 1">回答的及时</div>
                                <div class='label-item flex' v-if="item.lable6 == 1">态度很好</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class='no-data flex' v-else>暂无评价</div>
            </div>
        </div>
        <div class='btn-wrap flex'>
            <div class='share column flex'>
                <!-- <img src='../assets/share.png'></img>
                <p>分享给病友</p> -->
            </div>
            <div class='online-ill flex'@click="goRegistration" v-if="clinicid">门诊挂号</div>
            <div class='online-ill flex'@click="goChatTap">在线问诊</div>
            <div class='ill-history column flex' @click='goCaseTap'>
                <img src='../assets/ill.png'></img>
                <p>就诊病例</p>
            </div>
        </div>
        <!-- 弹窗 -->
        <div class='layer flex' v-if="phoneShow">
            <div class="windows column" :class="{'heightShow':phoneShow}">
                <div class='title flex'>
                    <p>请填写您的手机号码，医生才能及时跟您取得联系：</p>
                    <div class='close-wrap flex' @click='closeTap'>
                        <img src='../assets/close.png'></img>
                    </div>
                </div>
                <div class='form-wrap column'>
                    <div class='form-item flex'>
                        <p class='label flex'>手机号码</p>
                        <input type='number' v-model='phone' @input="phoneInput($event)"></input>
                    </div>
                    <div class='form-item flex'>
                        <span class='label flex'>验证码</span>
                        <input type='number' v-model='code'></input>
                        <div class="get-code flex" :class="{'disabled':codeFlag}" @click='getCodeTap'>{{getCodeTxt}}</div>
                    </div>
                </div>
                <div class='pay-btn flex' @click='goChatTrueTap'>确定</div>
            </div>
        </div>
        <!-- 加载中 -->
        <div class='loading column' v-if="showLoading">
            <img src='../assets/load.gif'></img>
            <p>拼命加载中...</p>
        </div>

    </div>
</template>

<script>
    import { doctorsinfo,doctorcomment,userinfo,sendsms,updateuserinfo } from "./../api/index";
    import { registrationUrl } from "./../config/index";
    import { Toast,MessageBox } from 'mint-ui';
    import axios from "axios";
    import star from '../assets/star.png'
    import starActive from '../assets/star-active.png'
    export default{
        data(){
            return{ 
                flag: true,//防止多次跳转的变量
                status: 1,//判断是进入记录还是进入病例
                clinicid:'',
                registrationStatus:'',
                doctorDetail: '',//医生详情
                doctorid: '',//医生id
                patientid: '',//患者id
                userid: '',//我的userid
                commentList: [],//医生评价数组
                page: 0,//页数
                pagesize: 5,
                phoneShow: false,//显示弹窗
                codeFlag: true,//控制获取验证码按钮的样式
                phone: '',//手机号码
                code: '',//验证码
                getCodeTxt: '获取验证码',
                timer: '',//倒计时定时器
                showLoading: true,//加载中
                source: '',//页面来源
                outTime: 1500,
                gradeList: [
                    {
                        img: star,
                        imgActive: starActive,
                        type: 1
                    },
                    {
                        img: star,
                        imgActive: starActive,
                        type: 2
                    },
                    {
                        img: star,
                        imgActive: starActive,
                        type: 3
                    },
                    {
                        img: star,
                        imgActive: starActive,
                        type: 4
                    },
                    {
                        img: star,
                        imgActive: starActive,
                        type: 5
                    },
                ],//评价分数组
            }
        },
        mounted(){
            let mstr = sessionStorage.getItem('mstr')
             console.log(this.$route.params)
            if(this.$route.params.id){
                this.doctorid = this.$route.params.id  
                sessionStorage.setItem('doctorDetailid',this.$route.params.id )
            }else{
                this.doctorid = sessionStorage.getItem('doctorDetailid')
            }
           
            if(this.$route.params.clinicid){
                this.clinicid = this.$route.params.clinicid
                this.registrationStatus = this.$route.params.status
            }
            doctorsinfo(mstr,this.doctorid).then((res)=>{
                if(res.data.status === 1){
                    this.doctorDetail = res.data.data  
                    document.title = this.doctorDetail.doctorname + '医生';
                }
                this.getCommentList(mstr)
                this.showLoading = false
            })
        },
        methods:{
            //获取医生评价
            getCommentList(mstr){
                doctorcomment(mstr,this.doctorid,this.page,this.pagesize).then((res)=>{
                    if(res.data.status === 1){
                        this.commentList = res.data.data
                    }else{
                        this.commentList = []
                    }
                })
            },
            //查看全部评价
            lookAllTap(){
                this.$router.push({
                    name:'doctorComment',
                    params:{
                        id:this.doctorid
                    }
                })
            },
            //输入电话号码
            phoneInput(e){
                if (this.isTel(this.phone)) {
                    this.codeFlag = false
                } else {
                    this.codeFlag = true
                }
            },
            //手机号码验证函数
            isTel(tel) {
                return (/^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/.test(tel));
            },
            //去门诊挂号
            goRegistration(){
                axios.post(registrationUrl,{
                    doctorid:this.doctorid,
                    orgid:this.clinicid
                }).then((res)=>{
                    if(res.data.status === 1){
                        console.log(res.data)
                        location.href = res.data.data.URL
                    }
                })
            },
            goChatTap(){
                // MessageBox({
                //     title: '温馨提示',
                //     message: '客官，该功能暂未开放，请选择去门诊挂号',
                //     showCancelButton: false,
                //     confirmButtonText:'去附近门诊挂号',
                // }).then(action => {
                //     this.$router.push({
                //         name:'map'
                //     })
                // })
                // return false
                this.status = 1
                this.isHavePhone()
            },
            //查看病例
            goCaseTap(){
                this.status = 2
                this.isHavePhone()
            },
            //判断患者是否填写过手机号码
            isHavePhone(){
                let mstr = sessionStorage.getItem('mstr')
                userinfo(mstr).then((res)=>{
                    if(res.data.status === 1){
                        if(res.data.data.phone){
                            this.patientid = res.data.data.patientid,
                            this.userid = res.data.data.userid
                            sessionStorage.setItem('userinfo',JSON.stringify(res.data.data))
                            this.navigateToTap()
                        }else{
                            this.phoneShow = true
                        }
                    }
                })
            },
            //跳转问诊页面 or 病例页面
            navigateToTap(){
                if(this.status == 1){
                    this.$router.push({
                        name:'reword',
                        params:{
                            doctorid:this.doctorid,
                            doctoruserid:this.doctorDetail.userid,
                            patientid:this.patientid,
                            userid:this.userid
                        }
                    })
                }else if(this.status == 2){
                    this.$router.push({
                        name:'case',
                        params:{
                            doctorid:this.doctorid,
                            doctorname:this.doctorDetail.doctorname,
                            patientid:this.patientid
                        }
                    })
                }
            },
            //获取手机验证码
            getCodeTap(){
                let mstr = sessionStorage.getItem('mstr')
                if (this.isTel(this.phone) && !this.codeFlag) {
                    sendsms(mstr,this.phone).then((res)=>{
                        if(res.data.status === 1){
                            this.codeFlag = true
                            this.getCodeTxt = '60' + 's'
                            this.count(60)
                        }else{
                            Toast({
                                message: res.data.info,
                                position: 'center',
                                duration: 5000
                            })
                        }
                    })
                }
            },
            //验证码按钮倒计时
            count(num) {
                clearTimeout(this.timer)
                this.timer = setTimeout(() => {
                    --num
                    if (num == 0) {
                        this.codeFlag = false,
                        this.getCodeTxt =  '获取验证码'
                    } else {
                        this.getCodeTxt = num + 's'
                        this.count(num)
                    }
                }, 1000)
            },
            //确定
            goChatTrueTap(){
                let mstr = sessionStorage.getItem('mstr')
                if (!this.isTel(this.phone)) {
                    Toast({
                        message: '请输入有效号码',
                        position: 'center',
                        duration: 5000
                    })
                    return false;
                }
                if (!this.code.replace(/(^\s*)|(\s*$)/g, "")) {
                    Toast({
                        message: '请输入验证码',
                        position: 'center',
                        duration: 5000
                    })
                    return false;
                }
                let options={
                    mstr,
                    phone:this.phone,
                    verify_code:this.code
                }
                updateuserinfo(options).then((res)=>{
                    if(res.data.status === 1){
                        this.phoneShow = false
                        this.isHavePhone()
                    }
                })
            },
            
            closeTap(){
                clearTimeout(this.timer)//清除定时器
                this.phoneShow = false
                this.codeFlag= true,
                this.getCodeTxt= '获取验证码'
                this.phone= ''
            }
        }
    }
</script>
<style lang="scss" scoped>
@import "../base/css/_base.scss";
/* pages/doctorDetail/doctorDetail.wxss */
.wrap {
    background: #fff;
    border-radius: torem(10px);
    margin: 0 torem(30px);
}
.bold{
    font-weight: bold;
}

.border {
    border-bottom: 1px solid #D9D9D9;
}

/* 医生信息 */

.doctor-info-wrap {
    position: relative;   
    background: #fff;
}

.doctor-info-wrap .info-bg {
    width: 100%;
    height: torem(200px);
}

.doctor-info-wrap .doctor-info {
    margin-top: torem(-100px);
    box-shadow: 0 torem(5px) torem(9px) torem(1px) rgba(228, 228, 228, 0.46);
    padding: 0 torem(30px) torem(22px) torem(30px);
}
.doctor-info .doctor {
    position: relative;
    padding: torem(25px) 0 torem(25px) torem(30px);
    font-size: torem(28px);
    align-items: center;
    background: #fff;
}

.doctor>img {
    width: torem(140px);
    height: torem(140px);
    border-radius: 50%;
    border: torem(4px) solid #f0b96a;
    position: absolute;
    left: torem(10px);
    top: torem(-44px);
}

.doctor .info {
    margin-left: torem(160px);
}

.doctor .info .name {
    color: #333;
    font-size: torem(30px);
    font-weight: bold;
    width: torem(420px);
}
.doctor .info .name>p{
    font-size: torem(28px);
    margin-left: torem(20px);
    font-weight: normal;
   
}
.doctor .info .num{
    color: #333333;
    font-size: torem(26px);
    margin-top: torem(10px);
}
.doctor-info .intro {
    color: #808080;
    font-size: torem(26px);
}

/* 医生公告 */
.content-wrap{
    padding: 0 torem(30px);
    background: #fff;
}
.content-wrap .content{
    padding-bottom: torem(20px);
}
.content .title{
    font-size:torem(30px);
    color: #333;
    font-weight: bold;
    padding: torem(40px) 0 torem(20px) 0;
    justify-content: space-between;
    align-items: center;
}
.content .title.nopadding{
    padding: torem(40px) 0 0 0;
}
.content .title .look{
    color: #999999;
    font-size: torem(24px);
}
.content-wrap .doctor-time{
    padding: torem(40px) 0 torem(20px) 0;
    font-size: torem(30px);
    color: #333;
    align-items: center;
}
.content-wrap .doctor-time.top{
    align-items: flex-start;
}
.content-wrap .doctor-time .online-time{
    flex: 1;
}
.doctor-time .online-time>p{
    width: 100%;
}
.doctor-time .online-time .tips{
    font-size: torem(26px);
    color: #666;
}
/* 门诊信息 */
.content .main{
    color: #333333;
    font-size: torem(26px);
    line-height: torem(40px);
}
.content .main .main-item{
    justify-content: space-between;
    margin-bottom: torem(10px);
}
.main .main-item .address{
    color: #333333;
    font-size: torem(26px);
}
.main .main-item .time{
    color: #808080;
    font-size: torem(24px);
}

/* 擅长调理 */
.content .label{
    color: #333333;
    flex-wrap: wrap;
    width: 100%;
}
.content .label .label-item{
    border-radius:torem(6px);
	border: solid 1px #b2b2b2;
    padding: torem(5px) torem(20px);
    margin-right: torem(30px);
    font-size: torem(26px);
    margin-bottom: torem(15px);
    color:#333;
}
.evaluate-item .label .label-item{
    margin-bottom:0;
    margin-top: torem(10px);
    border: solid 1px #EDB668;
    color: #EDB668;
}
/* 评价 */
.evaluate-item{
    padding: torem(20px) 0;
}
.evaluate-item .evaluate-up{
    justify-content: space-between;
    margin-bottom: torem(15px);
}
.evaluate-up .user{
    align-items: center;
}
.evaluate-up .user .star{
    color: #333333;
    font-size: torem(26px);
    margin-right: torem(10px);
}
.evaluate-up .user .star img{
    width: torem(32px);
    height: torem(32px);
    margin-right: torem(10px);
}
.evaluate-up .user .username{
    color: #808080;
    font-size: torem(24px);
}
.evaluate-up .time{
    color: #999999;
    font-size: torem(24px);
}
.evaluate-down{
    font-size: torem(26px);
    line-height: torem(42px);
}
.evaluate-down .comment{
    color: #333;
    margin-bottom: torem(5px);
}
.evaluate-down .ill-intro{
    color: #666;
}
.btn-wrap{
    align-items: center;
    padding:torem(50px) torem(20px) torem(50px) torem(20px);
    justify-content: space-between;
    position: relative;
    background: #fff;
}
.online-ill{
    width: torem(220px);
	height: torem(80px);
	background-color: #db5033;
	border-radius: torem(8px);
    color: #ffffff;
    font-size: torem(30px);
    align-items: center;
    justify-content: center;
}
/* 分享按钮 */
/* 就诊病例 */
.ill-history,.share{
    align-items: center;
    color: #4d4d4d;
    font-size: torem(22px);
    width: torem(100px);
}
.ill-history img{
    width: torem(47px);
    height: torem(55px);
    margin-bottom: torem(10px);
}
.share img{
    width: torem(47px);
    height: torem(42px);
    margin-bottom: torem(20px);
}
.no-data{
    height: torem(150px);
}

/* 弹窗 */
.windows{
    width: torem(560px);
    background: #fff;
    border-radius: torem(10px);
    padding-bottom: torem(30px);
}
.windows .title{
    padding: torem(30px) torem(40px);
    color: #333333;
    font-size: torem(30px);
    font-weight: bold;
    position: relative;
    width: 100%;
}
.windows .title p{
    width:torem(400px);
}
.windows .title img{
    width: torem(50px);
    height: torem(50px);
}
.windows  .close-wrap{
    width: torem(100px);
    height: torem(100px);
    position: absolute;
    align-items: center;
    justify-content: flex-end;
    right: torem(20px);
    top: 50%;
    transform: translateY(-50%);
}
/* 填写手机号码*/
.windows .form-wrap{
    padding: torem(40px) torem(30px) torem(40px) torem(20px);
}
.form-wrap .form-item{
    align-items: center;
    margin-bottom: torem(20px);
}
.form-item .label{
    color: #333333;
    font-size: torem(28px);
    width: torem(120px);
    justify-content: flex-end;
}
.form-item input{
    height: torem(60px);
	border-radius: torem(6px);
	border: solid torem(2px) #999999;
    flex: 1;
    margin-left: torem(20px);
    padding-left: torem(20px);
    font-size: torem(28px);
    width: torem(80px);
}
.form-item .get-code{
    padding: 0 torem(10px);
	height: torem(60px);
	background-color: #d55940;
	border-radius: torem(6px);
    font-size: torem(20px);
    color: #fff;
    justify-content: center;
    align-items: center;
    margin-left: torem(20px);
}
.form-item .get-code.disabled{
    background: #999;
}

.windows .pay-btn{
    width: torem(269px);
	height: torem(86px);
	background-color: #d55940;
	border-radius: torem(6px);
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: torem(32px);
    margin:0 auto;
    font-weight: bold;
}

</style>